.button {
  cursor: pointer;
  font-size: var(--font-sm);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: normal;
  padding: 1.1rem 1.6rem;
  border: none;
  user-select: none;

  &.center {
    justify-content: center;
  }

  &.left {
    justify-content: start;
  }

  &.right {
    justify-content: end;
  }

  &.primary {
    background: var(--primary-btn-bg);
    color: var(--color-white);
    border-radius: 0.3rem;
    padding: 1.65rem 1.6rem;
    line-height: 1;

    &:not([disabled]):hover {
      background: var(--primary-btn-hover);
    }

    &:not([disabled]):active {
      background-color: var(--primary-btn-active);
    }
  }

  &.primary-action {
    background: var(--primary-btn-bg);
    color: var(--color-white);
    border-radius: 0.3rem;
    padding: 1.65rem 1.6rem;
    line-height: 1;

    &:not([disabled]):hover {
      background: var(--primary-btn-hover);
      box-shadow: 0 0 0.4rem 0.5rem color-mix(in srgb, var(--color-blue-600) 10%, transparent);
    }

    &:not([disabled]):active {
      background-color: var(--primary-btn-active);
      box-shadow: 0 0 0.4rem 0.6rem color-mix(in srgb, var(--color-blue-600) 10%, transparent);
    }
  }

  &.secondary {
    background-color: color-mix(in srgb, var(--color-slate-600) 47%, transparent);
    border-radius: var(--border-radius-sm);
    color: var(--color-white);
    padding: 1.1rem 1.25rem;
    font-weight: normal;
    position: relative;
    line-height: 1;
    letter-spacing: 0;

    > .btn-image {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-height: 2.3rem;
      max-width: 2.3rem;
      margin-right: 1.15rem;
    }

    > .arrow-icon {
      position: absolute;
      right: 0.5rem;
      top: 0.5rem;
      max-width: 0.8rem;
    }

    &:not([disabled]):hover {
      background-color: #50577e99;
    }

    &:not([disabled]):active {
      background: #50577eb3;
    }
  }

  &.disabled,
  &:disabled {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.8;
  }

  &.slim {
    padding: 6px 10px;
  }
}
